<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default.html}">
<head>
    <title>角色</title>
</head>
<body>
<section layout:fragment="wrapper">
    <form class="layui-form" th:object="${entity}" action="">
        <div class="mainBox">
            <div class="main-container">
                <input type="hidden" name="id" th:value="*{id}">
                <div class="layui-form-item layui-row">
                    <div class="layui-col-md6 layui-col-sm6">
                        <div class="layui-inline">
                            <label class="layui-form-label">名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" lay-verify="required" autocomplete="off" maxlength="20"
                                       placeholder="请输入名称" class="layui-input" th:value="*{name}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-sm6">
                        <div class="layui-inline">
                            <label class="layui-form-label">编码</label>
                            <div class="layui-input-block">
                                <input type="text" name="code" lay-verify="required" autocomplete="off" maxlength="20"
                                       placeholder="请输入编码" class="layui-input" th:value="*{code}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-md6 layui-col-sm6">
                        <div class="layui-inline">
                            <label class="layui-form-label">类型</label>
                            <div class="layui-input-block">
                                <select name="roleType" lay-verify="required" lay-search>
                                    <option value="3" th:selected="*{roleType eq '3'}">普通用户</option>
                                    <option value="2" th:selected="*{roleType eq '2'}">一般管理员</option>
                                    <option value="1" th:selected="*{roleType eq '1'}">系统管理员</option>
                                    <option value="0" th:selected="*{roleType eq '0'}">超级管理员</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-sm6">
                        <div class="layui-inline">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="radio" name="status" value="1" title="启用" th:checked="*{status ne '2'}">
                                <input type="radio" name="status" value="2" title="禁用" th:checked="*{status eq '2'}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-md6 layui-col-sm6">
                        <div class="layui-inline">
                            <label class="layui-form-label">数据权限</label>
                            <div class="layui-input-block">
                                <select name="dataScope" lay-verify="required" lay-search lay-filter="dataScope">
                                    <option value="7" th:selected="*{dataScope eq '9'}">本人</option>
                                    <option value="3" th:selected="*{dataScope eq '3'}">本机构</option>
                                    <option value="2" th:selected="*{dataScope eq '2'}">本机构及以下</option>
                                    <option value="1" th:selected="*{dataScope eq '1'}">全部</option>
                                    <option value="0" th:selected="*{dataScope eq '0'}">自定义</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-sm6">
                    </div>
                </div>
                <hr class="layui-border-orange">
                <div class="layui-form-item layui-row">
                    <div class="layui-col-md6 layui-col-sm6">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <ul id="menuTree" class="dtree" data-id=""></ul>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-sm6">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <ul id="officeTree" th:class="*{dataScope eq '0' ? 'dtree' : 'dtree layui-hide'}"
                                    data-id=""></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit
                        lay-filter="form-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>
    <script th:inline="javascript">
        layui.use(['form', 'jquery', 'button', 'dtree'], function () {
            let form = layui.form;
            let button = layui.button;
            let $ = layui.jquery;
            let dtree = layui.dtree;

            let id = [[${entity.id}]];

            let menuTreeIns = dtree.render({
                elem: "#menuTree",
                initLevel: "2", //默认展开层级为1
                line: true, // 有线树
                ficon: ["1", "-1"], // 设定一级图标样式。0表示方形加减图标，8表示小圆点图标
                icon: ["0", "2"], // 设定二级图标样式。0表示文件夹图标，5表示叶子图标
                width: '100%',
                url: '[(@{/a/sys/menu/data})]',
                method: 'post',
                dataFormat: "list",
                dataStyle: "layuiStyle",
                response: {message: "msg", statusCode: '20000'},
                checkbar: true,
                done: function(res, $ul, first) {
                    if(first) {
                        let menuIdList = [[${entity.menuIdList}]] || [];
                        // 修改
                        if (id && menuIdList.length > 0) {
                            menuTreeIns.chooseDataInit(menuIdList.join(','));
                            // 反选半选状态
                            menuTreeIns.initNoAllCheck();
                        }
                    }
                }
            });

            let officeTreeIns = dtree.render({
                elem: "#officeTree",
                initLevel: "2", //默认展开层级为1
                line: true, // 有线树
                ficon: ["1", "-1"], // 设定一级图标样式。0表示方形加减图标，8表示小圆点图标
                icon: ["0", "2"], // 设定二级图标样式。0表示文件夹图标，5表示叶子图标
                width: '100%',
                url: '[(@{/a/sys/office/data})]',
                method: 'post',
                dataFormat: "list",
                dataStyle: "layuiStyle",
                response: {message: "msg", statusCode: '20000'},
                checkbar: true,
                checkbarType: "no-all",
                done: function(res, $ul, first) {
                    if(first) {
                        let officeIdList = [[${entity.officeIdList}]] || [];
                        // 修改
                        if (id && officeIdList.length > 0) {
                            officeTreeIns.chooseDataInit(officeIdList.join(','));
                            // 反选半选状态
                            officeTreeIns.initNoAllCheck();
                        }
                    }
                }
            });

            form.on('select(dataScope)', function (data) {
                // 自定义
                if (data.value === '0') {
                    $('#officeTree').removeClass('layui-hide');
                } else {
                    $('#officeTree').addClass('layui-hide');
                }
            });

            form.on('submit(form-save)', function (data) {
                // 防止重复提交
                button.load({
                    elem: '[lay-submit]',
                    time: 2000,
                    done: function() {
                    }
                })

                // 处理数据
                let field = data.field;
                field["menuIdList"] = dtree.getCheckbarJsonArrParam("menuTree").nodeId;
                // 自定义
                if (field.dataScope === '0') {
                    field["officeIdList"] = dtree.getCheckbarJsonArrParam("officeTree").nodeId;
                }
                $.ajax({
                    url: '[(@{/a/sys/role/save})]',
                    data: field,
                    dataType: 'json',
                    contentType: 'application/x-www-form-urlencoded',
                    type: 'post',
                    success: function (result) {
                        if (result.code === '20000') {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
                                parent.layui.table.reload("tb-table");
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
                return false;
            });
        })
    </script>
</section>>
</body>
</html>
